<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button class="set">创建</button>
    <button class="get">获取</button>
    <button class="edit">修改</button>
    <button class="del">删除</button>
    <button class="key">key</button>

    <div>
        <a href="./01 复习.html">同目录</a>
        <a href="../../day09/html/01 运算符的优先级.html">同站点</a>
        <a href="https://www.baidu.com">百度</a>
    </div>
</body>
<script>
    // webStorage的API   ( localStorage（本地存储）和 sessionStorage（会话存储)
    // 属性:
    // length  =>  返回数据的长度 (存储数据的数量)

    // 方法: 
    // setItem(key, value) —— 保存数据，以键值对的方式存储信息  (没有就新增 有就修改)
    // getItem(key)        —— 获取数据，将键值传入，即可获取到对应的value值
    // removeItem(key)     —— 删除单个数据，根据键值移除对应的信息
    // clear()             —— 删除所有的数据
    // key(index)          —— 获取某个索引的key  (遍历数据)


    // 注意:
    // 1. localStorage（本地存储）和 sessionStorage（会话存储) => 都是全局对象,但是键值也只能存储字符串类型 (数组和对象也要转化为JSON字符串)
    // 2. localStorage（本地存储）和 sessionStorage（会话存储) => 都是全局对象,也可以使用对象的语法
    // 3. localStorage（本地存储）和 sessionStorage（会话存储)默认存储在站点的根目录 => 可以跨页面访问


    // localStorage和sessionStorage的区别
    // 1. 生命周期区别:
    // localStorage(本地存储) 的生命周期是永久的，关闭页面或浏览器之后localStorage中的数据也不会消失。
    // localStorage除非主动删除数据，否则数据永远不会消失

    // sessionStorage的生命周期是仅在当前窗口会话下有效,关闭会话窗口就失效了。 (同网站,同窗口)
    // sessionStorage引入了一个“浏览器窗口会话”的概念，sessionStorage是在同源(同一个域名下)的窗口中始终存在的数据。
    // 只要这个浏览器窗口没有关闭，即使刷新页面或者进入同源(同一个服务器目录 / 相同的网站)另一个页面，数据依然存在。
    // 但是sessionStorage在关闭了浏览器窗口后就会被销毁。同时独立的打开新的窗口但是同一个页面，sessionStorage也是不一样的。



    var set = document.getElementsByClassName("set")[0];
    var get = document.getElementsByClassName("get")[0];
    var edit = document.getElementsByClassName("edit")[0];
    var del = document.getElementsByClassName("del")[0];
    var key = document.getElementsByClassName("key")[0];

    set.onclick = function () {
        sessionStorage.setItem("user", "a123123");
        sessionStorage.pwd = "123123";

        var arr = [1, 2, 3];
        var obj = { a: 1, b: 2 };
        sessionStorage.setItem("arr", JSON.stringify(arr))
        sessionStorage.obj = JSON.stringify(obj);
    }


    get.onclick = function () {
        console.log(sessionStorage.getItem("user"));
        console.log(sessionStorage.getItem("pwd"));
        console.log(JSON.parse(sessionStorage.arr));
        console.log(JSON.parse(sessionStorage.obj));
    }

    edit.onclick = function () {
        sessionStorage.setItem("user", "bbbbbb");
        sessionStorage.pwd = "313213123";
    }

    del.onclick = function () {
        // console.log(sessionStorage.removeItem("user"));;
        // console.log(sessionStorage.removeItem("pwd"));;
        // console.log(delete sessionStorage.arr);;
        // console.log(delete sessionStorage.obj);;

        sessionStorage.clear();
    }

    key.onclick = function () {
        // for...in 遍历sessionStorage,sessionStorage会出现多余属性
        // console.log(sessionStorage);
        // for (var key in sessionStorage) {
        //     console.log(key);
        // }

        for (var i = 0; i < sessionStorage.length; i++) {
            var key = sessionStorage.key(i);
            console.log(key, sessionStorage.getItem(key), sessionStorage[key]);
        }


    }







</script>

</html>